<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div id="app">
    <div v-if="books.length">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>单格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in books" :key="index">
            <!-- <td v-for="value in item">{{value}}</td> -->
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date}}</td>
            <!-- <td>{{getFinalPrice(item.price)}}</td> -->
            <td>{{item.price | showPrice}}</td>
            <td>
              <button @click="sub(index)" v-bind:disabled="item.count <= 1">-</button>
              {{item.count}}
              <button @click="add(index)">+</button>
            </td>
            <td>
              <button @click="remove(index)">移除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <h2>总价格：{{totalPrice}}</h2>
    </div>
    <div v-else>
      <h2>购物车为空</h2>
    </div>
  </div>

  <script src="../js/vue.js"></script>
  <script src="main.js"></script>



</body>

</html>